<template>
    <transition appear name="side_anime">
        <div>
            <h1>科室管理</h1>

            <el-divider></el-divider>

            <div class="btn">
                <el-button icon="el-icon-plus" type="success" size="small" @click="addSubjectFormVisible = true">新增科室</el-button>
            </div>

            <!-- 科室列表 -->
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%">

                <el-table-column
                prop="name"
                label="科室名称"
                width="120">
                </el-table-column>
                
                <el-table-column
                prop="description"
                label="科室描述"
                width="180">
                </el-table-column>

                <el-table-column
                prop="type"
                label="是否启用"
                width="120">
                    <template #default="scope">
                        <span v-if="scope.row.type == 1">
                            <el-tag type="success">已启用</el-tag>
                        </span>
                        <span v-if="scope.row.type == 0">
                            <el-tag type="danger">未启用</el-tag>
                        </span>
                    </template>
                </el-table-column>

                <el-table-column
                prop="pics"
                label="科室图片"
                width="220">
                </el-table-column>

                <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
                </el-table-column>

            </el-table>

            <!-- 新增科室 -->
            <el-dialog title="新增科室" v-model="addSubjectFormVisible" width="30%">
                <el-form ref="addSubjectForm" :model="addSubjectForm" label-width="80px" :rules="rules"> 
                    <el-form-item prop="name" label="科室名称">
                        <el-input v-model="addSubjectForm.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="description" label="科室描述">
                        <el-input type="textarea" placeholder="请输入科室描述" v-model="addSubjectForm.description" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="type" label="是否启用">
                        <el-select v-model="addSubjectForm.type" placeholder="请选择" clearable style="width:100%">
                            <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="pics" label="图片地址">
                        <el-input v-model="addSubjectForm.pics" clearable></el-input>
                    </el-form-item>
                </el-form>

                <span class="dialog-footer">
                <el-button @click="addSubjectFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubject('addSubjectForm')">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 编辑科室 -->
            <el-dialog title="编辑科室" v-model="updateSubjectFormVisible" width="30%">
                <el-form ref="updateSubjectForm" :model="updateSubjectForm" label-width="80px" :rules="rules">
                    <el-form-item prop="name" label="科室名称">
                        <el-input v-model="updateSubjectForm.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="description" label="科室描述">
                        <el-input type="textarea" placeholder="请输入科室描述" v-model="updateSubjectForm.description" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="type" label="是否启用">
                        <el-select v-model="updateSubjectForm.type" placeholder="请选择" clearable style="width:100%">
                            <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="pics" label="图片地址">
                        <el-input v-model="updateSubjectForm.pics" clearable></el-input>
                    </el-form-item>
                </el-form>

                <span class="dialog-footer">
                <el-button @click="updateSubjectFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSubject('updateSubjectForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </transition>


</template>
<script>
import { defineComponent, inject, ref } from 'vue'
import { addDepartment, deleteDepartment, getAllDepartment, updateDepartment } from '../../api/api';

export default defineComponent({
    inject: ['reload'],
    data() {
        return {
            tableData: [],
            addSubjectFormVisible:false,
            addSubjectForm:{},
            updateSubjectForm:{},
            updateSubjectFormVisible:false,
            options:[
                {
                    value: '1',
                    label: '已启用',
                },
                {
                    value: '0',
                    label: '未启用',
                },
            ],
            value: '',
            rules: {
                name:{ required:true, message:'不能为空', trigger: 'blur'},
                description:{ required:true, message:'不能为空', trigger: 'blur'},
                type:{ required:true, message:'不能为空', trigger: 'blur'}
            }
        }
    },

    setup() {
        return {
        textarea: ref(''),
        }
    },

    mounted() {
        this.getSubjectList();
    },

    methods: {
        //获取科室列表
        getSubjectList() {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
            'satoken':token
            }
            getAllDepartment(header).then(response => {
            console.log('请求成功',response)
            if (response.ret == '0'){
                this.tableData = response.data
            }else {
                this.$message({
                message:'获取科室失败',
                type: 'error',
                showClose:true
            })
            }
            })
        },

        //新增科室
        addSubject(forName) {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let data = {
                'name':this.addSubjectForm.name,
                'description':this.addSubjectForm.description,
                'type':this.addSubjectForm.type,
                'pics':this.addSubjectForm.pics
            }
            let header = {
                'satoken':token
            }
            //开启校验
            this.$refs[forName].validate((valid) => {
                if(valid) {
                    addDepartment(data,header).then(response => {
                        console.log('请求成功',response)
                        if (response.ret == '0'){
                            this.addNewsFormaddSubjectFormVisibleVisible = false
                            this.$message({
                                message:'添加成功',
                                type: 'success',
                                showClose:true
                            })
                            this.reload()
                        }else {
                            this.$message({
                                message:'添加失败',
                                type: 'error',
                                showClose:true
                            })
                        }
                    })
                }else {
                    return false;
                }
            })
            
        },

        //编辑科室
        handleEdit(index,row) {
            this.updateSubjectFormVisible = true,
            this.id = row.id,
            this.updateSubjectForm.name = row.name,
            this.updateSubjectForm.description = row.description,
            this.updateSubjectForm.type = row.type.toString(),
            this.updateSubjectForm.pics = row.pics
        },
        updateSubject(forName) {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let data = {
                'id':this.id,
                'name':this.updateSubjectForm.name,
                'description':this.updateSubjectForm.description,
                'type':this.updateSubjectForm.type,
                'pics':this.updateSubjectForm.pics
            }
            let header = {
                'satoken':token
            }
            console.log(data)
            //开启校验
            this.$refs[forName].validate((valid) => {
                if(valid) {
                    updateDepartment(data,header).then(response => {
                        console.log('请求成功',response)
                        if (response.ret == '0'){
                            this.updateSubjectFormVisible=false
                            this.$message({
                                message:'修改成功',
                                type: 'success',
                                showClose:true
                            })
                            this.reload()
                        }else {
                            this.$message({
                                message:'修改失败',
                                type: 'error',
                                showClose:true
                            })
                        }
                    })
                }else {
                    return false;
                }
            })
            
        },

        //删除科室
        handleDelete(index,row) {
            let data = {
                'id':row.id
            }
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
                'satoken':token
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
            .then(() => {
                deleteDepartment(data,header).then(response => {
                    if (response.ret == '0'){
                    // this.tableData.splice(index,1)
                    // this.$router.push('/homeview/newsList')
                    this.$message({
                        message:'删除成功',
                        type: 'success',
                        showClose:true
                    })
                    this.reload()
                    }else {
                    this.$message({
                        message:'删除失败',
                        type: 'error',
                        showClose:true
                    })
                    }
                })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                })
            })
        }
    }
})
</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}
.btn {
  text-align: left;
  margin: 10px 0 5px 0;
}
</style>
